<template>
  <!-- 添加或修改客户对话框 -->
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    v-loading="loading"
    :visible.sync="open"
    width="850px"
    append-to-body
  >
    <el-row>
      <el-col :span="18">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="auto"
          :disabled="disabled"
          :class="{ 'detail-disabled': disabled }"
        >
          <el-form-item label="供应商类型" prop="supplierType">
            <el-select v-model="form.supplierType" placeholder="请选择供应商类型" clearable>
              <el-option
                v-for="dict in dict.type.supplier_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value * 1"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商名称" prop="supplierName">
            <el-input v-model="form.supplierName" placeholder="请输入供应商名称" />
          </el-form-item>
          <el-form-item label="标签" prop="tagTypeList">
            <el-select v-model="form.tagTypeList" multiple placeholder="请选择供应商标签类型" clearable>
              <el-option
                v-for="dict in dict.type.supplier_tag"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="封面" prop="coverImg">
            <image-upload
              :limit="1"
              @input="
                (val) => {
                  form.coverImg = val
                }
              "
              :value="form.coverImg"
            />
          </el-form-item>

          <el-form-item label="编号" prop="supplierNumber">
            <el-input v-model="form.supplierNumber" placeholder="请输入编号" />
          </el-form-item>
          <el-form-item label="规模" prop="scale">
            <el-select v-model="form.scale" placeholder="请选择规模" clearable>
              <el-option
                v-for="dict in dict.type.supplier_scale"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value * 1"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="联系人" prop="contactPerson">
            <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="联系方式" prop="contactNumber">
            <el-input v-model="form.contactNumber" placeholder="请输入联系方式" />
          </el-form-item>
          <el-form-item label="详情">
            <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入详情信息"></el-input>
          </el-form-item>
          <el-form-item label="附件列表" prop="annexDtoList">
            <file-upload
              valueType="object"
              :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'png', 'jpg', 'jpeg']"
              @input="
                (val) => {
                  form.annexDtoList = JSON.parse(val)
                }
              "
              :limit="20"
              :value="form.annexDtoList"
            />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col v-if="form.id" :span="24">
        <div class="decorate">
          <span>合同列表</span>
        </div>
        <el-table
          :data="contractList"
          style="width: 100%"
          @row-click="contractRowClick"
          v-loading="contractLoading"
          row-class-name="tableColumn"
          :header-cell-style="{ background: '#fff' }"
        >
          <el-table-column prop="contractName" align="center" label="合同名称"> </el-table-column>
          <el-table-column prop="contractProgressName" align="center" label="合同进度"> </el-table-column>
          <el-table-column prop="status" align="center" label="审核状态">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.contract_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column prop="contractManager" align="center" label="合同负责人"> </el-table-column>
        </el-table>
        <pagination
          v-show="contractTotal > 0"
          :total="contractTotal"
          :page.sync="contractParams.pageNum"
          :limit.sync="contractParams.pageSize"
          @pagination="getProjectList"
        />
        <div class="decorate" style="margin-top: 20px">
          <span>项目列表</span>
        </div>
        <el-table
          :data="projectList"
          style="width: 100%"
          @row-click="projectRowClick"
          v-loading="projectLoading"
          row-class-name="tableColumn"
          :header-cell-style="{ background: '#fff' }"
        >
          <el-table-column prop="projectName" align="center" label="项目名称"> </el-table-column>
          <el-table-column prop="projectNumber" align="center" label="项目编号"> </el-table-column>

          <el-table-column prop="projectManager" align="center" label="项目类型">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.project_type" :value="scope.row.projectType" />
            </template>
          </el-table-column>

          <el-table-column align="center" prop="projectLevel" label="项目级别">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.project_level" :value="scope.row.projectLevel" />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="projectTotal > 0"
          :total="projectTotal"
          :page.sync="projectParams.pageNum"
          :limit.sync="projectParams.pageSize"
          @pagination="getProjectList"
        />
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer" v-if="!disabled">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
    <contract-details
      :show="modelName === 'contractDetails'"
      :disabled="true"
      @cancel="handleOpenModel"
      :id="modelData.contractId"
    />
    <project-details
      :show="modelName === 'projectDetails'"
      :disabled="true"
      @cancel="handleOpenModel"
      :id="modelData.id"
    ></project-details>
  </el-dialog>
</template>
<script>
import { getSupplier, addSupplier, updateSupplier } from '@/api/biz/supplier'
import { listProject } from '@/api/biz/project'
import { listInformation } from '@/api/biz/contract'

export default {
  name: 'SupplierDetailsChildren',
  components: {
    ContractDetails: () => import('@/views/biz/contract/components/ContractDetails.vue'),
    ProjectDetails: () => import('@/views/biz/project/ProjectDetails.vue'),
  },
  props: {
    id: {
      type: Number | String,
      default: '',
    },
    show: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      open: false,
      title: '',
      // 表单参数
      form: {},
      loading: false,
      // 表单校验
      rules: {
        createTime: [{ required: true, message: '供应商名称不能为空', trigger: 'blur' }],
      },
      projectParams: {
        pageNum: 1,
        pageSize: 10,
        supplierId: '',
      },
      projectList: [],
      projectTotal: 0,
      projectLoading: false,
      contractParams: {
        pageNum: 1,
        pageSize: 10,
        supplierId: '',
      },
      contractList: [],
      contractLoading: false,
      contractTotal: 0,
      modelData: {},
      modelName: '',
    }
  },
  dicts: ['supplier_type', 'supplier_tag', 'supplier_scale', 'project_level', 'contract_status', 'project_type'],
  watch: {
    show: {
      handler(val) {
        this.open = val
      },
    },
    open: {
      handler(val) {
        this.reset()
        if (val) {
          if (this.disabled) {
            this.title = '供应商详情'
          } else {
            this.title = !this.id ? '添加供应商' : '修改供应商'
          }
          if (this.id) {
            this.form.id = this.id
            this.loading = true
            getSupplier(this.id)
              .then((response) => {
                if (response.data.supplierTagList && response.data.supplierTagList.length > 0) {
                  response.data.tagTypeList = response.data.supplierTagList.map((item) => `${item.tagType}`)
                }
                this.form = response.data
                this.loading = false
              })
              .catch(() => {
                this.loading = false
              })
            this.contractParams.supplierId = this.id
            this.getContractList()
            this.projectParams.supplierId = this.id
            this.getProjectList()
          }
        } else {
          this.$emit('cancel', false)
        }
      },
    },
  },
  methods: {
    projectRowClick(row) {
      this.handleOpenModel('projectDetails', row)
    },
    contractRowClick(row) {
      this.handleOpenModel('contractDetails', row)
    },
    getProjectList() {
      this.projectLoading = true
      listProject(this.projectParams)
        .then((response) => {
          this.projectList = response.rows
          this.projectTotal = response.total
          this.projectLoading = false
        })
        .catch(() => {
          this.projectLoading = false
        })
    },
    getContractList() {
      this.contractLoading = true
      listInformation(this.contractParams)
        .then((response) => {
          this.contractList = response.rows
          this.contractTotal = response.total
          this.contractLoading = false
        })
        .catch(() => {
          this.contractLoading = false
        })
    },
    handleOpenModel(name = '', data = {}) {
      this.modelName = name
      this.modelData = data
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        supplierName: null,
        supplierType: null,
        supplierNumber: null,
        tagTypeList: null,
        scale: null,
        contactPerson: null,
        contactNumber: null,
        remark: null,
        annexDtoList: null,
        coverImg: null,
      }
      this.resetForm('form')
    },
  },
}
</script>
<style lang="scss" scoped>
.decorate {
  display: flex;
  flex-direction: row;
  font-size: 16px;
  color: #333;
  padding: 15px 0;
  &::before {
    display: block;
    content: '';
    width: 4px;
    height: 20px;
    background: #317bf9;
    margin-right: 8px;
  }
}
</style>
<style>
.tableColumn {
  cursor: pointer;
}
</style>
